<template>
    <!-- 合格供应商列表页 -->
    <div class="page">
        <div class="top">
            <div class="left">
                <!-- <el-button size="mini" @click="exportss()">导出</el-button> -->
            </div>
            <div class="right">
                <div style="margin-right: 5px; margin-top: 10px">
                    <el-input
                        placeholder="输入项目编号"
                        suffix-icon="el-icon-search"
                        size="small"
                        v-model="searchIpt"
                        @change="search()"
                    >
                    </el-input>
                </div>
                <div style="margin-top: 10px">
                    <el-button
                        size="small"
                        style="background: #2e61d7; color: #fff"
                        @click="dialogVisibleSearch = true"
                        >高级搜索
                    </el-button>
                </div>
            </div>
        </div>
        <div class="list">
            <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                class="e-table"
                :max-height="$store.state.tableHeight"
                :header-cell-style="{ textAlign: 'center' }"
                :cell-style="{ textAlign: 'center' }"
                @selection-change="handleSelectionChange"
                v-sortTable="{
                    tableData: tableData,
                    _this: this,
                    ref: 'multipleTable'
                }"
            >
                <el-table-column type="selection" width="50"> </el-table-column>
                <el-table-column label="供应商名称" width="250">
                    <template slot-scope="scope">
                        <span
                            @click="Examine(scope.row.id)"
                            style="color: blue; cursor: pointer"
                        >
                            {{ scope.row.supplierName }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="registerCapital"
                    label="注册资本（万元）"
                    width="150"
                >
                </el-table-column>
                <el-table-column
                    prop="creditCode"
                    label="统一社会信用代码"
                    width="200"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="manageOrgName"
                    label="管理单位"
                    width="250"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="supplyCommodity"
                    label="供应商品"
                    width="150"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="qualificationLevelName"
                    label="资质等级"
                    width="250"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="creditLevel"
                    label="信用等级"
                    width="100"
                    show-overflow-tooltip
                >
                </el-table-column>

                <!-- <el-table-column
          prop="state"
          label="状态"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column
          prop="theStatus"
          label="变更状态"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column> -->
            </el-table>
        </div>
        <div class="bottom">
            <ComPagination />
        </div>
        <!-- 弹窗 -->
        <el-dialog
            title="高级搜索"
            :visible.sync="dialogVisibleSearch"
            width="650px"
            :modal="false"
            :modal-append-to-body="false"
            custom-class="searchDialog"
        >
            <div>
                <el-form label-width="100px">
                    <el-form-item label="主营范围：">
                        <el-input
                            v-model="input1"
                            placeholder="请输入内容"
                            size="mini"
                        >
                            <i
                                slot="suffix"
                                class="el-input__icon el-icon-document-copy"
                            ></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="计划日期：">
                        <div style="display: flex">
                            <el-date-picker
                                v-model="value1"
                                size="mini"
                                style="flex: 1"
                            >
                            </el-date-picker>
                            <span class="separate">—</span>
                            <el-date-picker
                                arrow-control
                                v-model="value2"
                                size="mini"
                                style="flex: 1"
                            >
                            </el-date-picker>
                        </div>
                    </el-form-item>
                    <el-form-item label="状态：">
                        <el-select
                            v-model="value1"
                            size="mini"
                            placeholder="请选择活动区域"
                            :clearable="false"
                            :popper-append-to-body="false"
                            style="width: 100%; line-height: 30px"
                        >
                            <el-option
                                label="区域一"
                                value="shanghai"
                            ></el-option>
                            <el-option
                                label="区域二"
                                value="beijing"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" style="background: #7aa818; color: #fff"
                    >重置</el-button
                >
                <el-button size="mini" style="background: #2e61d7; color: #fff"
                    >确定</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>
<script>
import ComPagination from '@/components/pagination/pagination.vue'

export default {
    components: {
        ComPagination
    },
    data () {
        return {
            dialogVisibleSearch: false,
            searchIpt: '',
            input1: '',
            value1: '',
            value2: '',
            tableData: [
                {
                    supplierName: '', //工程供应商名称
                    registerCapital: '', //注册资本
                    creditCode: '', //统一社会信用代码
                    manageOrgName: '', //管理单位
                    supplyCommodity: '', //供应商品
                    qualificationLevelName: '', //资质等级
                    creditLevel: '' //信用等级
                }
            ]
        }
    },
    created () {
        this.getData()
    },
    mounted () {},
    methods: {
        //查询合格供应商列表数据
        getData () {
            this.$Ajax
                .httpPost({
                    url: '/outer/supplier/listByQualifiedEntity',
                    params: {
                        creditcode: '',
                        keyword: '',
                        limit: 10,
                        number: '',
                        page: 1,
                        subcontractorname: ''
                    }
                })
                .then(res => {
                    this.tableData = res.list
                })
        },
        //导出按钮
        exportss () {
            // this.$router.push('/subcontractorAdd')
        },

        handleSelectionChange (val) {
            this.multipleSelection = val
        },
        //点击表格查看对应信息
        Examine (id) {
            this.$router.push({
                path: '/qualifiedExamine',
                query: { id }
            })
        },
        //搜索
        search () {
            this.$Ajax
                .httpPost({
                    url: '/outer/supplier/listByQualifiedEntity',
                    params: {
                        creditcode: '',
                        keyword: this.searchIpt,
                        limit: 10,
                        number: '',
                        page: 1,
                        subcontractorname: ''
                    }
                })
                .then(res => {
                    this.tableData = res.list
                })
        }
    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    background-color: rgb(239, 242, 246);
    border: 1px solid #ccc;
    border-radius: 5px;
    .top {
        height: 50px;
        display: flex;
        background-color: #fff;
        justify-content: space-between;
        .left {
            flex: 1;
            ::v-deep.el-button--mini {
                margin-top: 10px;
                margin-left: 5px;
                color: #fff;
                background-color: rgb(122, 168, 24);
            }
        }
        .right {
            display: flex;
            width: 300px;
        }
    }
    .list {
        flex: 1;
        margin-top: 10px;
    }
    .bottom {
        height: 50px;
        padding-bottom: 20px;
    }

    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
        width: 6px; // 横向滚动条
        height: 10px; // 纵向滚动条
    }
    // 滚动条的滑块
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
        background-color: #ddd;
        border-radius: 5px;
    }
}
</style>
